<template>
    <div id="System_Site">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>站点设置</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <template v-if="this.$store.state.windowWidth>750">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="站点设置" name="first">
                        <SystemSite v-if="activeName=='first'"></SystemSite>
                    </el-tab-pane>
                    <el-tab-pane label="支付设置" name="second">
                        <pay v-if="activeName=='second'"></pay>
                    </el-tab-pane>
                    <el-tab-pane label="充值设置" name="third">
                        <recharge v-if="activeName=='third'"></recharge>
                    </el-tab-pane>
                    <el-tab-pane label="热门搜索设置" name="sixth">
                        <hot_search v-if="activeName=='sixth'"></hot_search>
                    </el-tab-pane>
                    <el-tab-pane label="分销设置" name="seventh">
                        <distribution v-if="activeName=='seventh'"></distribution>
                    </el-tab-pane>
                    <el-tab-pane label="分享设置" name="fourth">
                        <shareData v-if="activeName=='fourth'"></shareData>
                    </el-tab-pane>
                    <el-tab-pane label="推送设置" name="ninth">
                        <pushSet v-if="activeName=='ninth'"></pushSet>
                    </el-tab-pane>
                    <el-tab-pane label="第三方设置" name="three">
                        <Set v-if="activeName=='three'"></Set>
                    </el-tab-pane>
                    <el-tab-pane label="提现设置" name="eleven">
                        <withdrawset v-if="activeName=='eleven'"></withdrawset>
                    </el-tab-pane>
                    <el-tab-pane label="VIP套餐设置" name="eighth">
                        <VIPset v-if="activeName=='eighth'"></VIPset>
                    </el-tab-pane>
                    <el-tab-pane label="VIP特权设置" name="fifteen">
                        <VIPpower v-if="activeName=='fifteen'"></VIPpower>
                    </el-tab-pane>
                    <el-tab-pane label="邀请奖励设置" name="twelve">
                        <invite v-if="activeName=='twelve'"></invite>
                    </el-tab-pane>
                    <el-tab-pane label="广告设置" name="adSet">
                        <adSet v-if="activeName=='adSet'"></adSet>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <template v-else>
                <el-select v-model="value" placeholder="请选择" style="width: 100%;">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div style="margin-top: 30px">
                    <SystemSite v-if="value=='1'"></SystemSite>
                    <pay v-if="value=='2'"></pay>
                    <recharge v-if="value=='3'"></recharge>
                    <hot_search v-if="value=='4'"></hot_search>
                    <distribution v-if="value=='5'"></distribution>
                    <shareData v-if="value=='6'"></shareData>
                    <pushSet v-if="value=='7'"></pushSet>
                    <Set v-if="value=='8'"></Set>
                    <withdrawset v-if="value=='9'"></withdrawset>
                    <VIPset v-if="value=='10'"></VIPset>
                    <VIPpower v-if="value=='11'"></VIPpower>
                    <invite v-if="value=='12'"></invite>
                    <adSet v-if="value=='13'"></adSet>
                </div>
            </template>
        </el-card>

    </div>
</template>

<script>
    import SystemSite from '../../components/system_site/system_site'
    import recharge from '../../components/system_site/recharge'
    import pay from '../../components/system_site/pay'
    import hot_search from '../../components/system_site/hot_search'
    import pushSet from '../../components/system_site/push_set'
    import withdrawset from '../../components/system_welfare/withdraw_set'
    import invite from '../../components/system_welfare/invite'
    import distribution from '../../components/system_site/distribution'
    import shareData from '../../components/system_site/share-data'
    import Set from '../../components/system_site/Set'
    import VIPset from '../../components/system_site/VIPset'
    import VIPpower from '../../components/system_site/VIPpower'
    import adSet from '../../components/system_site/adSet'

    export default {
        name: "System_Site",
        components: {
            SystemSite,
            recharge,
            pay,
            hot_search,
            distribution,
            shareData,
            pushSet,
            Set,
            withdrawset,
            invite,
            VIPset,
            VIPpower,
            adSet
        },
        data() {
            return {
                activeName: 'first',
                options: [{
                    value: '1',
                    label: '站点设置'
                }, {
                    value: '2',
                    label: '支付设置'
                }, {
                    value: '3',
                    label: '充值设置'
                }, {
                    value: '4',
                    label: '热门搜索设置'
                }, {
                    value: '5',
                    label: '分销设置'
                }, {
                    value: '6',
                    label: '分享设置'
                }, {
                    value: '7',
                    label: '推送设置'
                }, {
                    value: '8',
                    label: '第三方设置'
                }, {
                    value: '9',
                    label: '提现设置'
                }, {
                    value: '10',
                    label: 'VIP套餐设置'
                }, {
                    value: '11',
                    label: 'VIP特权设置'
                }, {
                    value: '12',
                    label: '邀请奖励设置'
                }, {
                    value: '13',
                    label: '广告设置'
                },],
                value: '1'
            }
        },
        methods: {
            handleClick(tab, event) {
                this.activeName = tab.name
            }
        }
    }
</script>

<style scoped>

</style>